<template>
  <div id="app">
    <router-view/>
		<el-dialog class="chat-dialog" title="客户服务" :visible.sync="showChatDialog">
		  <ul class="chat-content" id="chatBox">
		     <li v-for="(item, index) in messageList" :key="index">
		        <div class="sys-msg" v-if="item.type == 'sys'">
		          <div class="msg">
		            <span>{{item.msg}}</span>
		          </div>
		        </div>
		        <div class="dialog-msg" v-if="item.type == 'dialogStart'">
		          <div class="msg">
		            <span>{{item.msg}}</span>
		          </div>
		        </div>
		        <div class="dialog-msg" v-if="item.type == 'dialogStop'">
		          <div class="msg">
		            <span>{{item.msg}}</span>
		          </div>
		        </div>
		        <div class="text-msg receive-msg" v-if="item.userType == 'user'">
							<el-image src="imgs/user.png"/>
		          <div class="msg-box">
		            <div class="user">
		              <span class="name">{{'用户 '+item.from}}</span>
		              <span class="time">{{item.createTime | time}}</span>
		            </div>
		            <div class="msg">
		              <span>{{item.msg}}</span>
		            </div>
		          </div>
		        </div>
		        <div class="text-msg send-msg" v-if="item.userType == 'staff'">
		          <div class="msg-box">
		            <div class="user">
		              <span class="time">{{item.createTime | time}}</span>
		              <span class="name">{{user.name}}</span>
		            </div>
		            <div class="msg">
		              <span>{{item.msg}}</span>
		            </div>
		          </div>
							<el-image src="imgs/staff.png"/>
		        </div>
		     </li>
		  </ul>
			<div class="chat-btn-box">
			  <div class="chat-input">
			    <el-input
			      v-model="message"
			      placeholder=""
			    />
			  </div>
			  <div class="chat-btn">
			    <i class="el-icon-circle-plus-outline"></i>
			    <el-button @click="sendMessage">发送</el-button>
			  </div>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from '@/config/constants'
import sysApi from '@/api/sysApi'	
	
export default {
  name: 'App',
	data () {
		return{
			showChatDialog: true,
			webSocket: null,
			messageList: [],
			message: '',
			to: ''
		}
	},
	created () {
		this.checkLoginStatus();
		this.$store.commit(constants.STORE.UPDATE_USER);
		this.$store.commit(constants.STORE.SET_USER_MENU_LIST); 
		this.initWebSocket();
	},
	computed: {
    ...mapState(['user'])
  },
	methods: {
		/* 检查登录状态 */
		async checkLoginStatus () {
			await sysApi.loginStatus();
		},
		//连接webSocket
		initWebSocket () {
		  this.webSocket = new WebSocket("ws://www.mvvm.site:8850/ws");
		  this.webSocket.onopen = this.onOpen;
		  this.webSocket.onclose = this.onClose;
		  this.webSocket.onerror = this.onError;
		  this.webSocket.onmessage = this.onMsg;
		},
		onOpen () {
		  this.webSocket.send(JSON.stringify({type: 'connectStart', userType: 'staff', uid: this.user.id, createTime: new Date()}));
		  console.log("连接打开!")
		},
		onClose () {
		  console.log("连接关闭!")
		},
		onError () {
		  console.log("连接错误!")
		},
		onMsg (event) {
			console.log("收到消息："+event.data)
			var data = JSON.parse(event.data);
			if(data.type == "dialogStart"){
			  this.to = data.to;
			}
			this.messageList.push(JSON.parse(event.data))
			this.$nextTick(() => {
			  let msg = document.getElementById('chatBox') // 获取对象
			  msg.scrollTop = msg.scrollHeight // 滚动高度
			})
		},
		//发送消息
		sendMessage () {
		  if(this.message){
		    var msg = {type: 'text', userType: 'staff', from: this.user.id, to:this.to, msg: this.message, createTime: new Date()};
		    //发送消息
		    this.webSocket.send(JSON.stringify(msg))
		    //放入聊天框
		    this.messageList.push(msg)
		    //清空输入框
		    this.message = ''
				this.$nextTick(() => {
				  let msg = document.getElementById('chatBox') // 获取对象
				  msg.scrollTop = msg.scrollHeight // 滚动高度
				})
		  }
		}
	}
}
</script>

<style lang="scss">
.mb100{
	margin-bottom: 100px;
}
.fs-14{
	font-size: 14px;
}
.money{
	color: #e1212b;
}	
ul,li{
	margin: 0;
	padding: 0;
}
li{
	list-style:none;  
}
	
.el-icon-location-information,.el-icon-position{
	margin-right: 5px;
}
.table-header{
	font-size: 15px;
}
	
/* 菜单样式 */
.el-menu{
	border-right-width: 0 !important;
}	
.no-submenu{
	padding-left: 10px !important;
}

/* 面包屑样式 */
.breadcrumb-card{
	.breadcrumb-header{
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

/* card样式 */
.el-card{
	margin-bottom: 5px;
	.el-card__header{
		padding: 10px 20px;
	}
	.el-card__body{
		padding: 10px 20px;
	}
}
/* card滚动条效果 */
.card-form>.el-card__body{
	height: 100%;
}
.card-form .el-scrollbar{
	height: 100%;
	.el-scrollbar__wrap{
		overflow: auto;
	}
}
.el-scrollbar-end{
	height: 90px;
}

/* form样式 */
.form{
	.el-form-item {
		margin-bottom: 10px !important;
		.el-form-item__content{
			.el-select{
				width: 100%;
			}
		}
	}	
}
.edit-form{
	margin-top: 10px;
	padding-right: 20px;
	.el-form-item {
		margin-bottom: 15px !important;
	}
}

/* table样式 */
.table-card{
	.el-card__body{
		padding: 5px 10px 20px 10px;
	}
}

/* 分页样式 */
.pagination{
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.version{
		font-size: 14px;
		margin-left: 2px;
		color: #333;
	}
	.el-pagination{
		display: flex;
		justify-content: flex-end;
		.el-pager{
			li{
				font-weight: normal;
				background-color: #fff !important;
			}
			li.active{
				background-color: #409EFF !important;
			}
		}
		.btn-prev{
			background-color: #fff !important;
		}
		.btn-next{
			background-color: #fff !important;
			margin-right: -4px !important;
		}
	}
}

/* 水平菜单 */
.el-menu--horizontal{
	.el-menu-item{
		padding: 0 30px;
		transition: none;
	}
	.el-menu-item.is-active{
		background-color: rgba(0,0,0,0.1) !important;
		border-bottom: none !important;
		padding: 0 30px;
	}
}
.el-cascader{
	width: 100%;
}

/* 进度条 */
.el-step__title{
	font-size: 14px !important;
}

/* 字体 */
.el-table--small{
	font-size: 13px !important;
}
.el-button--small{
	font-size: 13px !important;
}
.el-page-header__content{
	font-size: 14px !important;
}

.chat-dialog{
	.el-dialog__header,.el-dialog__body{
		background: #f0f0f0;
	}
	.el-dialog__header{
		border-bottom: 1px solid #fff;
	}
	.el-dialog__body{
		padding: 0;
	}
}
.chat-content{
	padding-bottom: 90px;
	height: 400px;
	overflow: auto;
	position: relative;
}
.sys-msg, .dialog-msg{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0px;
	.msg{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ccc;
		padding: 5px 10px;
		border-radius: 5px;
		span{
			font-size: 13px;
			color: #fff;
		}
	}
}
.text-msg{
	display: flex;
	align-items: baseline;
	padding: 10px 10px;
	.el-image{
		img{
			border-radius: 50%;
			height: 30px;
			width: 30px;
		}
	}
	.msg-box{
		position: relative;
		top: 5px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.user{
			color: #999;
			font-size: 12px;
			margin-bottom: 10px;
		}
		.msg{
			display: flex;
			align-items: center;
			word-wrap: break-word;
			word-break: break-all;
			span{
				background: #fff;
				padding: 5px 10px;
				border-radius: 10px;
				line-height: 24px;
				font-size: 14px;
				color: #333;
			}
		}
	}
}
.receive-msg{
	justify-content: flex-start;
	.el-image{
		margin-right: 10px;
	}
	.msg-box{
		.user{
			.name{
				margin-right: 10px;
			}
		}
		.msg{
			justify-content: flex-start;
		}
	}
}
.send-msg{
	justify-content: flex-end;
	.el-image{
		margin-left: 10px;
	}
	.msg-box{
		.user{
			.name{
				margin-left: 10px;
			}
		}
		.msg{
			justify-content: flex-end;
		}
	}
}
.chat-btn-box{
	z-index: 2;
	background: #f0f0f0;
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 20px);
	height: 70px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	border-top: 1px solid #fff;
	.chat-input{
		flex: 1;
		display: flex;
		align-items: center;
		.el-input{
			border-radius: 10px;
			padding: 7px 10px;
		}
	}
	.chat-btn{
		height: 40px;
		width: 110px;
		display: flex;
		align-items: center;
		i{
			font-size: 26px;
			margin: 0px 8px;
		}
		button{
			height: 37px;
			width: 80px;
		}
	}
}
</style>
